*{
    margin:0px;
    padding: 0px;
}
html, body {height: 100%;}
li{list-style: none;}
body{
    background: #000;
    overflow: hidden;
    margin:0px;
    padding:0px;
    width:100%;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}
.hide{
    display: none;
}
.clear{clear: both;}
.text_c{text-align: center;}
.m_auto{margin: 0 auto;}
.m5{margin: 5px;}
.m10{margin: 10px;}
.fl{float: left;}
.fr{float: right;}
#wrap{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    background: url(../img/bg.png) center center;
    background-size:100%
}
#main_layer{
    width: 100%;
    height: 100%;
    padding: 0px;
    
}
#m_broadcast{
    background: rgba(0,0,0,0.8);
    color: #F0F0F0;
    padding: 2px;
}
#loading_page{
    background: rgba(0,0,0,0.6);
    color: #FFF;
    padding: 5px;
}
.logo{
    width:140px;
    height: 91px;
    background: url(../img/logo.png) center center;
    background-size:100%;
    position: absolute;
    left: 50%;
    margin-left: -70px;
}
#c_level{
    font-weight: bold;
    display: inline-block;
    width:25px;
    line-height: 25px;
    background: #333;
    border: 1px solid #666;
    border-radius: 25px;
    text-align: center;
}
#main_uname{
    line-height: 25px;
    font-size: 18px;
}

.b_title{
    text-align: center;
    display: block;
    padding: 10px;
    background: rgba(0,0,0,0.5);
    color: #FFF;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 3px;
    border: 1px solid #666;
    font-size: 14px;
}
.panel{
    width: 100%;
    height: 100%;
    color: #F2F2F2;
    position: relative;
}
.panel_content{
    width: 320px;
    margin: 0 auto;
}
.panel_bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width:100%;
    height: 60px;
    background: rgba(0,0,0,0.8);
    font-size: 14px;
    line-height: 25px;
    font-weight: bold;
}
.big_box{
    margin: 10px;
    border: 1px solid #303030;
    background: rgba(0,0,0,0.6);
    border-radius: 5px;
    padding: 10px;
}
.big_btn{
    border: 1px solid #E0E0E0;
    background: rgba(0,0,0,0.4);
    border-radius: 5px;
    box-shadow:0px 2px 5px #000;
    padding: 10px;
    font-size: 30px;
    width:116px;
    text-align: center;
}
.big_menu li{
    margin: 10px auto;
    list-style: none;
    width:300px;
    height:98px;
    font-size: 12px;
    background: url(../res/common/list_bg.png) center center;
}
.big_menu li h2{
    font-size: 24px;
    font-weight: bold;
}
.ico_big_menu{
    float: left;
    width: 80px;
    margin: 15px 10px 15px 35px;
    height: 68px;
}
.desc_big_menu{
    float: left;
    width: 120px;
    margin: 15px 35px 15px 0px;
    height: 80px;
}
@media all and (min-width: 320px) {
    .panel_content{
        width: 320px;
    }
}
@media all and (max-width: 640px) and (min-width: 321px) {
    .panel_content{
        width: 320px;
    }
}
.field_holder{
    width:320px;
    height: 210px;
    margin: 0 auto;
    background: url(../res/common/field.jpg) center center;
    background-size: 100%;
    position: relative;
}
.player_in_f{
    position: absolute;
    width: 64px;
}
.f_pos_1{left: 10px;top:85px;}
.f_pos_2{left: 60px;top:5px;}
.f_pos_3{left: 60px;top:65px;}
.f_pos_4{left: 60px;top:115px;}
.f_pos_5{left: 60px;top:165px;}
.f_pos_6{left: 140px;top:5px;}
.f_pos_7{left: 140px;top:65px;}
.f_pos_8{left: 140px;top:115px;}
.f_pos_9{left: 140px;top:165px;}
.f_pos_10{left: 220px;top:50px;}
.f_pos_11{left: 220px;top:100px;}
.player_in_sub{
    float: left;
    width:64px;
    overflow: hidden;
    text-align: center;
}
.p_pos{
    position: absolute;
    top:20px;
    text-align: center;
    width:40px;
}
.p_f_img{
    height: 25px;
    width:25px;
    background: url(../res/common/player_bg.png) center center;
    background-size: 100%;
    padding: 5px;
    border-radius:40px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    box-shadow:0px 2px 5px #000;
}
.player_img{
    width:25px;
    border-radius:40px;
}
.p_f_name{
    text-align: center;
}
.player_in_otherp{
    display: block;
    margin: 10px;
    clear: both;
}
.player_in_otherp .p_f_img,.player_in_otherp .p_f_name,.otherp_pos{
    float: left;line-height: 40px;
}

#bottom_icon{
    background: rgba(0,0,0,0.2);
    height: 70px;
    width:100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: block;
    opacity: 1;
}
#bottom_icon.hide{
    display: none;
    -webkit-transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
#bottom_holder{
}
.ico{
    height: 70px;
    width: 60px;
    float: right;
    margin: 0px;
    color: #FFF;
    text-align: center;
}
.ico_ico{
    display: block;
    height: 50px;
    width:50px;
    margin: 0 auto;
}
.ico_mini{
    display:inline-block;
    height: 25px;
    width:25px;
}
.ico_desc{
    font-weight: bold;
}
#ico_1{
    background: url(../img/ico/ico_1.png) repeat-x;
    background-size: 100%;
}
#ico_2{
    background: url(../img/ico/ico_2.png) repeat-x;
    background-size: 100%;
}
#ico_3{
    background: url(../img/ico/ico_3.png) repeat-x;
    background-size: 100%;
}
#ico_4{
    background: url(../img/ico/ico_4.png) repeat-x;
    background-size: 100%;
}
#ico_5{
    background: url(../img/ico/ico_5.png) repeat-x;
    background-size: 100%;
}
#ico_6{
    background: url(../img/ico/ico_6.png) repeat-x;
    background-size: 100%;
}
#gameCanvas{
}